import React, { Component } from 'react'
import {Route,NavLink,Switch,Redirect} from 'react-router-dom'
import './App.css'
import Header from './components/Header/Header'
import About from './pages/About'
import Home from './pages/Home'
export default class App extends Component {
  render() {
    return (
      <div>
        <h1><Header a={1}></Header></h1>
        <div className='container'>
          <div className='left'>
            {/* <a href="./index.html">首页</a>
            <a href="./about.html">关于</a> */}
              {/* <Link to='/index'>首页</Link>
              <Link to='/about'>关于</Link> */}
              <NavLink activeClassName='demo' to='/home'>首页</NavLink>
              <NavLink activeClassName='demo' to='/about'>关于</NavLink>
          </div>
          <div className="right">
            {/* Switch匹配到后就不往下匹配了，提升效率 exact精准匹配 */}
            <Switch>
              <Route  path="/home" component={Home}></Route>
              <Route  path="/about" component={About}></Route>
              <Redirect to='/about'></Redirect>
            </Switch>
            
          </div>
        </div>
      </div>
      
    )
  }
}
